<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>

  <meta http-equiv="Content-Language" content="en-us">


  <title>IupFlatButton</title>
  <link rel="stylesheet" type="text/css" href="../../style.css">

  <style type="text/css">
.style1 {
	margin-left: 40px;
}
  .auto-style1 {
	  font-size: large;
  }
  .hist_new {
	color: #0000FF;
	font-weight: bold;
}
  .auto-style2 {
	margin-left: 2em;
}
  </style>
</head>


<body>

<div id="navigation">
  
<ul>

    <li><a href="#Creation">Creation</a></li>

    <li><a href="#Attributes">Attributes</a></li>

    <li><a href="#Callbacks">Callbacks</a></li>

    <li><a href="#Notes">Notes</a></li>

    <li><a href="#Examples">Examples</a></li>

    <li><a href="#SeeAlso">See Also</a></li>

  
</ul>

</div>


<h2>IupFlatButton <span class="auto-style1">(since 3.15)</span></h2>


  
<p>
Creates an interface element that is a button, but it does not have native 
decorations. When selected, this element activates a function in the 
application. Its visual presentation can contain a text and/or an image.</p>
<p>It behaves just like an<span class="Apple-converted-space">&nbsp;</span><a href="iupbutton.html">IupButton</a>, 
but since it is not a native control it has more flexibility for additional options. It can 
also behave like an<span class="Apple-converted-space">&nbsp;</span><a href="iuptoggle.html">IupToggle</a><span class="Apple-converted-space">&nbsp;</span>(without 
the checkmark).</p>
<p>It inherits from
  <a href="../elem/iupcanvas.html">IupCanvas</a>.</p>


<h3><a name="Creation">Creation</a></h3>


<pre>Ihandle* IupFlatButton(const char *<strong>title</strong>); [in C]<br>iup.flatbutton{[title = <strong>title</strong>: string]} -&gt; <strong>ih</strong>: ihandle [in Lua]<br>flatbutton(<strong>title</strong>) [in LED]</pre>

  
<p><b>
  title</b>: Text to be shown to the user. It can be NULL. It will set the TITLE 
  attribute.</p>

  
<p>
  <u>Returns:</u> the identifier of the 
  created element, or NULL if an error occurs.</p>


<h3><a name="Attributes">Attributes</a></h3>



<p>Inherits all attributes and callbacks of the <a href="../elem/iupcanvas.html">IupCanvas</a>, 
but redefines a few attributes.</p>
<p><b>ALIGNMENT</b> (<font size="3">non inheritable</font>): horizontal and 
vertical alignment of the set image+text. Possible values: &quot;ALEFT&quot;, &quot;ACENTER&quot; and &quot;ARIGHT&quot;,&nbsp; 
combined to &quot;ATOP&quot;, &quot;ACENTER&quot; and &quot;ABOTTOM&quot;. Default: &quot;ACENTER:ACENTER&quot;. Partial 
values are also accepted, like &quot;ARIGHT&quot; or &quot;:ATOP&quot;, the other value will be 
obtained from the default value. Alignment does not includes the padding area. </p>


  <p><strong>BACKIMAGE</strong> (<font SIZE="3">non inheritable</font>):
  image name to be used as background. Use
	<a href="../func/iupsethandle.html">IupSetHandle</a> or
	<a href="../func/iupsetattributehandle.html">IupSetAttributeHandle</a> to 
	associate an image to a name. See also
	<a href="../elem/iupimage.html">IupImage</a>. </p>
<p class="auto-style2"><strong>BACKIMAGEHIGHLIGHT</strong> (<font SIZE="3">non inheritable</font>): 
background image name of the element in highlight state. If it is not defined 
then the BACKIMAGE is used.</p>
  <p class="auto-style2"><strong>BACKIMAGEINACTIVE</strong> (<font SIZE="3">non inheritable</font>): 
  background image name of the element when inactive. If it is not defined then 
  the BACKIMAGE is used and its colors will be replaced by a modified version 
  creating the disabled effect.</p>

  
<p class="auto-style2"><strong>BACKIMAGEPRESS </strong>(<font size="3">non inheritable</font>): 
background image name of the element in pressed state. If it is not defined then 
the BACKIMAGE is used.</p>
<p><strong>BACKIMAGEZOOM</strong> (<font size="3">non inheritable</font>): 
if set the back image will be zoomed to occupy the full background. Aspect ratio 
is NOT preserved. Can be 
Yes or No. Default: No. (since 3.25)</p>

<p><a href="../attrib/iup_bgcolor.html">BGCOLOR</a>: Background color. If text 
and image are not defined, the button is configured to simply show a color, in 
this case set the button size because the natural size will be very small. If 
not defined it will use the background color of the native parent. </p>

<p class="auto-style2"><strong>HLCOLOR</strong>: background color used to indicate a highlight state. 
Pre-defined to &quot;200 225 245&quot;. Can be set to NULL. If NULL BGCOLOR will 
be used instead.</p>
<p class="auto-style2"><strong>PSCOLOR</strong>: background color used to indicate a press state. 
Pre-defined to &quot;150 200 235&quot;. Can be set to NULL. If NULL BGCOLOR will 
be used instead.</p>

<p><b>BORDER </b>(creation only):
  
  the default value is "NO". This is the <strong>IupCanvas</strong> border.</p>
<p><strong>BORDERCOLOR</strong>: color used for borders. Default: &quot;50 150 255&quot;. 
This is for the <strong>IupFlatButton</strong> drawn border.</p>
<p class="auto-style2"><strong>BORDERPSCOLOR</strong>: color used for borders when pressed or 
selected. Default use BORDERCOLOR. (since 3.19)</p>
<p class="auto-style2"><strong>BORDERHLCOLOR</strong>: color used for borders when highlighted. 
Default use BORDERCOLOR. (since 3.19)</p>
<p><strong>BORDERWIDTH</strong>: line width used for borders. Default: &quot;1&quot;. Any borders can be 
hidden by simply setting 
this value to 0. This is for the <strong>IupFlatButton</strong> drawn border.</p>
<p><strong>SHOWBORDER</strong>: by default borders are drawn only when the 
button is highlighted, if SHOWBORDER=Yes borders are always show. When 
SHOWBORDER=Yes and BGCOLOR is not defined, the actual BGCOLOR will be a darker 
version of the background color of the native parent. (since 3.25)</p>

<p><strong>CANFOCUS</strong> (creation only)<strong> </strong>(<font size="3">non inheritable</font>): 
enables the focus traversal of the control. Default: YES.</p>
<p><strong>FOCUSFEEDBACK</strong> (<font size="3">non inheritable</font>): draw 
the focus feedback. Can be Yes or No. Default: Yes. (since 3.26)</p>

<p><strong>PROPAGATEFOCUS </strong>(<font size="3">non inheritable</font>): enables the focus callback forwarding to the next native parent with FOCUS_CB defined. Default: NO. (since 3.23)</p>

<p>
<a href="../attrib/iup_expand.html" style="font-family: tahoma, verdana, arial, helvetica, geneva, sans-serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.7999992370605px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
EXPAND</a><span style="color: rgb(0, 0, 0); font-family: tahoma, verdana, arial, helvetica, geneva, sans-serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.7999992370605px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);"><span class="Apple-converted-space">&nbsp;</span>(</span><font size="3" style="color: rgb(0, 0, 0); font-family: tahoma, verdana, arial, helvetica, geneva, sans-serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.7999992370605px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">non 
inheritable</font><span style="color: rgb(0, 0, 0); font-family: tahoma, verdana, arial, helvetica, geneva, sans-serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.7999992370605px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);">): 
The default value is &quot;NO&quot;.<span class="Apple-converted-space">&nbsp;</span></span></p>

  
<p><a href="../attrib/iup_fgcolor.html">FGCOLOR</a>: Text color. Default: the 
global attribute DLGFGCOLOR.</p>
<p class="auto-style2"><strong>TEXTHLCOLOR</strong>: text color used to indicate a highlight state. 
If not defined FGCOLOR will 
be used instead. (since 3.26)</p>
<p class="auto-style2"><strong>TEXTPSCOLOR</strong>: text color used to indicate a press state. 
If not defined FGCOLOR will 
be used instead. (since 3.26)</p>



  
<p><strong>FITTOBACKIMAGE</strong> (<font size="3">non inheritable</font>): 
enable the natural size to be computed from the BACKIMAGE. If BACKIMAGE is not 
defined will be ignored. Can be 
Yes or No. Default: No.</p>


  <p><strong>FRONTIMAGE</strong> (<font SIZE="3">non inheritable</font>):
  image name to be used as foreground. The foreground image is drawn in the same 
  position as the 
  background, but it is drawn at last. Use
	<a href="../func/iupsethandle.html">IupSetHandle</a> or
	<a href="../func/iupsetattributehandle.html">IupSetAttributeHandle</a> to 
	associate an image to a name. See also
	<a href="../elem/iupimage.html">IupImage</a>.</p>
<p class="auto-style2"><strong>FRONTIMAGEHIGHLIGHT</strong> (<font SIZE="3">non inheritable</font>): 
foreground image name of the element in highlight state. If it is not defined 
then the FRONTIMAGE is used.</p>
  <p class="auto-style2"><strong>FRONTIMAGEINACTIVE</strong> (<font SIZE="3">non inheritable</font>): 
  foreground image name of the element when inactive. If it is not defined then 
  the FRONTIMAGE is used and its colors will be replaced by a modified version 
  creating the disabled effect.</p>

  
<p class="auto-style2"><strong>FRONTIMAGEPRESS </strong> (<font size="3">non inheritable</font>): 
foreground image name of the element in pressed state. If it is not defined then 
the FRONTIMAGE is used.</p>
<p><strong>HASFOCUS </strong> (read-only): returns the button state if has 
focus. Can be Yes or No. (since 3.21)</p>
<p><strong>HIGHLIGHTED </strong> (read-only): returns the button state if 
highlighted. Can be Yes or No. (since 3.21)</p>
<p><strong>IMAGE</strong> (<font SIZE="3">non inheritable</font>):
  Image name. Use
	<a href="../func/iupsethandle.html">IupSetHandle</a> or
	<a href="../func/iupsetattributehandle.html">IupSetAttributeHandle</a> to 
	associate an image to a name. See also
	<a href="../elem/iupimage.html">IupImage</a>.</p>
<p class="auto-style2"><strong>IMAGEHIGHLIGHT</strong> (<font SIZE="3">non inheritable</font>): 
Image name of the element in highlight state. If it is not defined then the 
IMAGE is used.</p>
  <p class="auto-style2"><strong>IMAGEINACTIVE</strong> (<font SIZE="3">non inheritable</font>): 
  Image name of the element when inactive. If it is not defined then the IMAGE 
  is used and its colors will be replaced by a modified version creating the 
  disabled effect. </p>

  
<p class="auto-style2"><strong>IMAGEPRESS </strong>(<font size="3">non inheritable</font>): Image 
name of the element in pressed state. If it is not defined then the IMAGE is 
used.</p>

<p><strong>IMAGEPOSITION </strong>(<font size="3">non inheritable</font>): 
Position of the image relative to the text when both are displayed. Can be: 
LEFT, RIGHT, TOP, BOTTOM. Default: LEFT.</p>

  
<p><b>PADDING</b>: internal margin. Works just like the MARGIN attribute of 
  the <strong>IupHbox</strong> and <strong>IupVbox</strong> containers, but uses 
a different name to avoid inheritance problems. Alignment does not includes the 
padding area. Default value: &quot;0x0&quot;. Value can be DEFAULTBUTTONPADDING, 
so the global attribute of this name will be used instead (since 3.29).</p>
<p><strong>CPADDING</strong>: same as PADDING but using the units of the <strong>
	SIZE</strong> attribute. It will actually set the PADDING attribute. (since 
3.29)</p>

<p><strong>PRESSED </strong> (read-only): returns the button state if pressed. 
Can be Yes or No. (since 3.21)</p>


<p><strong>RADIO</strong> (read-only): returns if the toggle is inside a radio. 
Can be &quot;YES&quot; or &quot;NO&quot;. Valid only after the element is mapped and TOGGLE=Yes, 
before returns NULL.</p>


<p><strong>IGNORERADIO</strong> (<font size="3">non inheritable</font>): when 
set the toggle will not behave as a radio when inside an <strong>IupRadio</strong> 
hierarchy. (since 3.21)</p>


<p><strong>SPACING </strong>(<font SIZE="3">non inheritable</font>): spacing between the 
image and the text. Default: &quot;2&quot;.</p>

  
  <p><strong>CSPACING</strong>: same as SPACING but using the units of the 
  vertical part of the <strong>
	SIZE</strong> attribute. It will actually set the SPACING attribute. (since 
  3.29)</p>

  
  <p><a href="../attrib/iup_title.html">TITLE</a> (<font SIZE="3">non inheritable</font>): 
	Label's text. The '\n' character is accepted for line change.</p>
<p><strong>TOGGLE</strong>: enabled the toggle behavior. Default: NO.</p>
<p><strong>TEXTALIGNMENT </strong>(<font size="3">non inheritable</font>): 
Horizontal text alignment for multiple lines. Can be: ALEFT, ARIGHT or ACENTER. 
Default: ALEFT. (since 3.22)</p>



  
<p><strong>TEXTWRAP </strong>(<font size="3">non inheritable</font>): For single 
line texts if the text is larger than its box the line will be automatically 
broken in multiple lines. Notice that this is done internally by the system, the 
element natural size will still use only a single line. For the remaining lines 
to be visible the element should use EXPAND=VERTICAL or set a SIZE/RASTERSIZE 
with enough height for the wrapped lines. (since 3.25)</p>
<p><strong>TEXTELLIPSIS </strong>(<font size="3">non inheritable</font>): 
If the text is larger that its box, an ellipsis (&quot;...&quot;) will be placed near the 
last visible part of the text and replace the invisible part. It will be ignored 
when TEXTWRAP=Yes. (since 3.25)</p>



  
<p>
<span style="color: rgb(0, 0, 0); font-family: tahoma, verdana, arial, helvetica, geneva, sans-serif; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.8px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);">
<span class="Apple-converted-space">
<strong>TEXTORIENTATION</strong> (<font size="3">non inheritable</font>): text 
angle in degrees and counterclockwise. The text size will adapt to include the 
rotated space. (since 3.25)</span></span></p>



  
<p><b>VALUE</b> (<font size="3">non inheritable</font>):
  Toggle's state. Values can be "ON",
  "OFF" or &quot;TOGGLE&quot;. 
  Default: "OFF". 
	The TOGGLE option will invert the current state. Valid only when TOGGLE=Yes. 
Can only be set to ON for a toggle inside a radio, it will automatically set to 
OFF the previous toggle that was ON.</p>

  

  
<blockquote>
    
  <hr>
</blockquote>

<p>
<a href="../attrib/iup_active.html">ACTIVE</a>,
<a href="../attrib/iup_font.html">FONT</a>, 
    <a href="../attrib/iup_expand.html">EXPAND</a>, <a href="../attrib/iup_screenposition.html">SCREENPOSITION</a>, 
<a href="../attrib/iup_position.html">
POSITION</a>, <a href="../attrib/iup_minsize.html">
MINSIZE</a>, <a href="../attrib/iup_maxsize.html">
MAXSIZE</a>,
    <a href="../attrib/iup_wid.html">WID</a>, <a href="../attrib/iup_tip.html">TIP</a>, <a href="../attrib/iup_size.html">SIZE</a>, 
<a href="../attrib/iup_rastersize.html">RASTERSIZE</a>,
    <a href="../attrib/iup_zorder.html">ZORDER</a>, <a href="../attrib/iup_visible.html">VISIBLE</a>,
<a href="../attrib/iup_theme.html">THEME</a>: 
also accepted.</p>


<h3><a name="Callbacks">Callbacks</a></h3>


<p>Inherits all callbacks of the <a href="../elem/iupcanvas.html">IupCanvas</a>, 
but redefines a few of them. Including ACTION, BUTTON_CB, MOTION_CB, FOCUS_CB, 
LEAVEWINDOW_CB, and ENTERWINDOW_CB. To allow the application to use those 
callbacks the same callbacks are exported with the &quot;FLAT_&quot; prefix using the same 
parameters, except the FLAT_ACTION callback that now mimics the <strong>
IupButton</strong> 
ACTION. They are all called before the internal callbacks and if they return 
IUP_IGNORE the internal callbacks are not processed.</p>
<p><strong>FLAT_ACTION</strong>:
  Action generated when the button 1 (usually 
  left) is selected. This callback is called only after the mouse is released and when it is released inside the 
  button area.</p>

  
    
<pre>int function(Ihandle*<strong> ih</strong>); [in C]<br><strong>ih</strong>:action() -&gt; (<strong>ret</strong>: number) [in Lua]</pre>

    
<p class="info"><strong>ih</strong>:
  identifier of the element that activated the 
  event.</p>

<p class="info"><u>Returns</u>: IUP_CLOSE will be processed.</p>

  
<p><strong>VALUECHANGED_CB</strong>: Called after the value was interactively 
changed by the user. Called only when TOGGLE=Yes. Called after the ACTION 
callback, but under the same context.</p>

<pre>int function(Ihandle *<strong>ih</strong>); [in C]<br><strong>ih</strong>:valuechanged_cb() -&gt; (<strong>ret</strong>: number) [in Lua]</pre>

    
<p class="info"><strong>ih</strong>:
  identifier of the element that activated the 
  event.</p>

    
<hr class="style1">

<p> 
<a href="../call/iup_map_cb.html">MAP_CB</a>, 
<a href="../call/iup_unmap_cb.html">UNMAP_CB</a>, 
<a href="../call/iup_destroy_cb.html">DESTROY_CB</a>, 
<a href="../call/iup_getfocus_cb.html">GETFOCUS_CB</a>,
  <a href="../call/iup_killfocus_cb.html">KILLFOCUS_CB</a>, 
<a href="../call/iup_enterwindow_cb.html">ENTERWINDOW_CB</a>,
  <a href="../call/iup_leavewindow_cb.html">LEAVEWINDOW_CB</a>, 
<a href="../call/iup_k_any.html">K_ANY</a>,
  <a href="../call/iup_help_cb.html">HELP_CB</a>: All common callbacks are 
supported.</p>


<h3><a name="Notes">Notes</a></h3>


<p>The <strong>IupFlatButton</strong> can contain text and image simultaneously. 
</p>
<p>The natural size will be a combination of the size of the image and the 
title, if any, plus PADDING and SPACING (if both image and title are present).</p>
<p>Borders are drawn only when the button is highlighted reproducing the 
behavior of the <strong>IupButton</strong> when FLAT=Yes.</p>


<p>Buttons are activated using Enter or Space keys.</p>

  
<p>When TOGGLE=Yes, To build a set of mutual exclusive toggles, insert them in a <strong>IupRadio</strong>
container. They must be inserted before creation, and their behavior can not be 
changed. </p>

<p>When TOGGLE=Yes, the button that is a child of an <strong>IupRadio</strong> automatically receives a name when 
its is mapped into the native system. 
(since 3.16)</p>
<p>To replace a <strong>IupButton</strong> by a <strong>IupFlatButton</strong> 
you must change the function call (<strong>IupFlatButton</strong> does not 
includes the action callback in the constructor) and change the ACTION callback 
name to FLAT_ACTION. </p>
<p>To replace a <strong>IupToggle</strong> by a <strong>
IupFlatButton</strong> you must do the same, and set TOGGLE=Yes. But notice that 
there will be no check box nor radio button. </p>
<p>Finally notice that the name of the 
secondary image attributes are different (for instance IMINACTIVE is 
IMAGEINACTIVE, IMPRESS is IMAGEPRESS, and so on). To define a button that only 
shows a color, do the same as in <strong>IupButton</strong> and don't define 
TITLE nor IMAGE, but instead of BGCOLOR use FGCOLOR to set the color of the 
button.</p>
<p>When the <strong>IupFlatButton</strong> displays only a text it will look 
like a label, use SHOWBORDER=Yes to force the display of the borders all the 
time.</p>


<h3><a name="Examples">Examples</a></h3>

<p><a href="../../examples/">Browse for Example Files</a></p>

<p>The sample buttons have PADDING=5x5.</p>

<table align="center">

	<tbody>
    <tr>

		<th>Normal</th>

		<th>Highlight</th>

		<th>Press</th>

		<th>Focus</th>

	</tr>

	<tr>

		<td class="bg_winxp"><img src="images/iupflatbutton_normal.png"></td>

		<td class="bg_winxp"><img src="images/iupflatbutton_highlight.png"></td>

		<td class="bg_winxp"><img src="images/iupflatbutton_pressed.png"></td>

		<td class="bg_winxp"><img src="images/iupflatbutton_focus.png"></td>

	</tr>

  </tbody>
</table>


<h3><a name="SeeAlso">See Also</a></h3>


<p><a href="iupimage.html">IupImage</a>, <a href="iupbutton.html">IupButton</a>, <a href="iuptoggle.html">IupToggle</a>,
<a href="iuplabel.html">IupLabel</a></p>



</body>
</html>
